<template>
	<view class="wrap">
		<fa-navbar title="软水方案对比"></fa-navbar>
		<view class="datacard">
			<view class="tit">
				软水方案对比
			</view>
			<view class="datacardbox">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" background="#fff"
					tooltipFormat="qytip" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(e) {
			let query = this.$Route.query || e || {};
			this.data = JSON.parse(query.data);

		},
		onReady() {
			this.getServerData();
		},
		onShareAppMessage() {
					return {
						title: '沁园全屋',
						imageUrl: "",
						path: "pages/index/index"
					}
				},
		data() {
			return {
				data: {},
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ],
					// rotate:true,
					padding: [15, 0, 5, 0],
					enableMarkLine: false,
					legend: {
						position: 'top',
						margin: 20,
						padding: 20,
						itemGap: 20,
						fontSize: 14,
						// borderWidth:1,
						// borderColor:'#ccc'
					},
					markLine: {
						type: 'dash'
					},
					xAxis: {
						fontSize: 12,
						disableGrid: false,
						//rotateLabel: true,
					//	rotateAngle:45//旋转角度，默认45度
						//labelCount:5

					},
					yAxis: {
						gridType: "dash",
						dashLength: 4,
						splitNumber: 5,


						data: [{
							min: 0,
							disabled: true,
							textAlign: 'center',
							// unit:'tt'


						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 2,
							categoryGap: 10,
							barBorderRadius: [20, 20, 0, 0]
						},
						tooltip: {
							borderRadius:5,
							showCategory:true, 
						}

					},




				}
			}
		},
		methods: {
			getServerData() {

				let dd = [];
				for (var i = 0; i < this.data.length; i++) {
					let temp = this.data[i].datajson;
					dd[i] = {
						'name': this.data[i].text,
						'data': [temp[2].value, temp[3].value, temp[4].value, temp[5].value]
					};
					// console.log(temp);
				}
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["年耗盐量(Kg)", "加盐周期(天)", "再生周期(天)", "建议单次加盐(Kg)"],
						series: dd
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 300);



			},

		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100%;
		height: calc(100vh);

		//background: linear-gradient(to top, #fff 0%, #009BDE 100%) left top no-repeat;
		background: url('../../static/image/szbg.png') left top no-repeat;
		background-size: 100%;
		// background-color:rgba(0,155,222,0.3);
		margin-bottom: 250rpx;
		margin-top:45rpx;




	}

	.tit {
		text-align: center;
		font-size: 1.5rem;
		height: 80rpx;
		line-height: 80rpx;
		font-weight: bold;
		color: #001689;
		//color: #fff;
		//text-shadow: 1rpx 1rpx #ccc;
	}


	.datacard {

		width: 95%;
		margin: 60rpx auto;
		background: #fff;
		min-height: 400rpx;
		border-radius: 30rpx;
		padding: 30rpx 10rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 0rpx 9rpx 2rpx rgba(127, 127, 127, 0.45);


		.datacardbox {
			height: calc(50vh);
			
		}

		.cardtit {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 1rem;
			color: #001689;
			font-weight: bolder;


		}


	}
</style>
